<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎，这里是仓库管理系统</title>
    <style>
        * {
            font-family: "Microsoft YaHei UI", serif;
            margin: 0;
            padding: 0;
        }
        body{
            background: #e0e0e0;
        }
        .top{
            height: 80px;
            width: 100%;
            margin: auto;
            background-color: rgba(0,0,0,0.5);
            border-bottom: 10px solid aqua;
        }
        .center{
            width: 900px;
            margin: auto;
        }
        .title {
            float: left;
            width: 250px;
            margin-left: 10px;
            line-height: 80px;
            color: floralwhite;
            font-size: 40px;
        }
        nav{
            width: 100%;
            height: 50px;
            background: gray;
        }
        nav ul{
            width: 900px;
            margin: auto;
            padding: 0 80px;
            font-size: 0;
        }
        li{
            display: inline-block;
            height: 20px;
            padding: 15px 0;
        }
        li:hover{
            background: #a9a9a9;
        }
        li>a{
            padding: 0 30px;
            border-right: 1px solid black;
            font-size: 20px;
            color: #292929;
            text-decoration: none;
        }
        .content{
            width: 900px;
            height: 600px;
            margin: auto;
            padding-top: 50px;
            background-color: rgba(0,0,0,0.2);
        }
        .frame{
            width: 100%;
            height: 100%;
            border:0;
        }
    </style>
    <script>
        function query() {
            var iframe = document.getElementById("iframe");
            iframe.src = "query.html";
        }
        function apply() {
            var iframe = document.getElementById("iframe");
            iframe.src = "apply.html"
        }
        function message() {
            var iframe = document.getElementById("iframe");
            iframe.src = "message.html"
        }
    </script>
</head>
<body>
<div class="top">
    <div class="center">
        <div class="title">
            仓库管理系统
        </div>
        <div class="user">

        </div>
    </div>
</div>

<nav>
    <ul>
        <li><a href="../query/query.html" target="frame">查询</a></li>
        <li><a href="apply/apply.html" target="frame">申请</a></li>
        <li><a href="../message/message.html" target="frame">消息</a></li>
    </ul>
</nav>

<div class="content">
    <iframe class="frame" name="frame" src="../query/query.html" ></iframe>
</div>

</body>
</html>
